<template>
	<view class="withdraw">
		<view class="withdraw-head">
			<view class="withdraw-head-to" style="width:250rpx">提现银行卡</view>
			<view class="withdraw-head-way">
				<view class="withdraw-head-way-1" @click="selectBankCard">
					<image class="way-icon" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/images/bank_icon.png"></image>
					<text class="way-text" >{{selectedBankCard.id==''?"请选择提现银行卡":selectedBankCard.bankName+"("+selectedBankCard.bankNum+")"}}</text>
				</view>
				<view class="withdraw-head-way-2">提现金额为10的倍数，72小时内到账，金额不能小于10</view>
			</view>
		</view>
		<view class="withdraw-body">
			<text>提现金额</text>
			<view class="input-money">
				<text class="rmb">￥</text>
				<input v-model.number="extract" type="text" @focus.prevent="stopKeyborad" class="t-input" />
			</view>
			<view class="info-money">
				<view v-if="is_out">
					<text class="info-money-num" style="color: #ff1e0f;">输入金额超过可提现余额，账户余额{{ userInfo.moneys }}元</text>
				</view>
				<view v-else-if="is_lowest">
					<text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ userInfo.moneys }}元</text>
				</view>
				<view v-else>
					<text class="info-money-num">当前可提现余额{{ userInfo.moneys }}元，</text>
					<text class="info-money-all" @click="getAll">全部提现</text>
				</view>
			</view>
			<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view>
		</view>

		<view :class="['keyboard', keyboradShow ? '' : 'active', isIphoneX ? 'isIphone' : '']">
			<block v-for="(item, index) in 9" :key="index">
				<view class="keyboard-item" @tap="keyboradKey(index + 1)">{{ index + 1 }}</view>
			</block>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" @tap="keyboradKey(0)"><text>0</text></view>
			<view class="keyboard-item delte" @tap="keyboradDel()"><image class="img" src="https://cmtq-1317574530.cos.ap-guangzhou.myqcloud.com/img2023/images/del.png" mode="aspectFill" :lazy-load="true"></image></view>
		</view>
		<qilin-bankCardList ref="bankCardpopup" :checkID="selectedBankCard.id" @changeBankCard="changeBankCard" @addBank="addBank" style="background-color: #fff;"></qilin-bankCardList>
		<lyy-pass-input ref="passInput" title="提现" :money="money" @confirm="confirm" @close="close"> </lyy-pass-input>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			pool: 0,
			extract: '',
			showModal: false,
			is_out: false,
			is_lowest: false,
			is_post: false,
			lowest: 0,
			fee: 0,
			money: '',
			real_money: '',
			keyboradShow: false,
			isIphoneX: false,
			isRefuse: false,
			selectedBankCard:{
				id:""
			}
		};
	},
	watch: {
		extract(oldVal, newVal) {}
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		async loadData() {
			this.$nextTick(() => {
				this.keyboradShow = true;
			});
		},
		stopKeyborad() {
			uni.hideKeyboard();
		},
		keyboradKey(key) {
			this.extract = this.extract * 10 + key;
			this.checkMoney();
		},
		keyboradDel() {
			if (this.extract && this.extract > 0) {
				let val = parseInt(this.extract / 10);
				if (val == 0) val = '';
				this.extract = val;
				this.checkMoney();
			}
		},
		async confirm(obj){
			console.log(obj.pass)
			let params = {
				money:this.money,
				id:this.selectedBankCard.id,
				payPassword:obj.pass
			}
			let data=await this.$apis.userWithdrawalSave(params);
			console.log(data)
			if(data){
				setTimeout(() => {
					uni.showToast({
						title: '提现申请成功！',
						icon: 'success',
						position: 'bottom',
						});
				}, 500);
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			}else{
				this.$refs["passInput"].close();
			}
			
		},
		close(){
			
		},
		getAll() {
			this.extract = parseInt(this.userInfo.moneys);
			this.checkMoney();
		},
		addBank(){
			this.$mRouter.push({
				route: this.$mRoutesConfig.addBankCard
			});
		},
		checkMoney() {
			if (!this.extract || this.extract < this.lowest) {
				this.is_lowest = true;
				this.is_post = false;
			} else if (this.extract > this.userInfo.moneys) {
				this.is_out = true;
				this.is_lowest = false;
				this.is_post = false;
			} else {
				this.is_out = false;
				this.is_lowest = false;
				this.is_post = true;
			}
			if (parseFloat(this.extract).toString() == 'NaN') {
				this.is_post = false;
				uni.showToast({
					title: '输入金额不合法',
					icon: 'error',
					position: 'bottom'
				});
			}
		},
		handleShowModel() {
			if (this.isRefuse) return;
			this.checkMoney();
			if (!this.is_post) return;
			if(this.selectedBankCard.id==""||this.selectedBankCard.id==null){
				uni.showToast({
					title: '请选择提现银行卡',
					icon: 'error',
					position: 'bottom'
				});
				return;
			}
			this.money = this.extract;
			this.$refs["passInput"].open();
			
			
			
		},
		getMoney() {
			this.showModal = false;
			if (this.isRefuse) return;
			this.isRefuse = true;
			setTimeout(() => {
				uni.showToast({
					title: '提现申请已提交，等待管理员处理',
					icon: 'success',
					position: 'bottom'
				});
			}, 500);
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		},
		selectBankCard(){
			this.$refs.bankCardpopup.openBankCardPopup();
		},
		changeBankCard(bankItem){
			console.log(bankItem.bankName)
			this.selectedBankCard=bankItem
		}
	},
	onPullDownRefresh() {
		this.extract = '';
		this.loadData();
		this.is_out = false;
		this.is_lowest = false;
		this.is_post = false;
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style lang="scss" scoped>
.way-text{
	display: inline-block;
	line-height: 36rpx;
}
.withdraw {
	padding: 20px;
	&-head {
		background-color: #efefef;
		display: flex;
		align-content: center;
		padding: 20px 30px;
		font-size: 14px;
		&-to {
		}
		&-way {
			display: flex;
			flex-direction: column;
			align-content: center;
			margin-left: 20px;
			&-1 {
				color: #576b95;
				margin-bottom: 10px;
				.way-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 5px;
					vertical-align: text-bottom;
				}
			}
			&-2 {
				color: #acacac;
				font-size: 12px;
			}
		}
	}
	&-body {
		background-color: #fff;
		padding: 20px 30px;
		font-size: 14px;
		.input-money {
			display: flex;
			align-content: center;
			font-weight: 600;
			border-bottom: 0.5px solid #eaeef1;
			.rmb {
				font-size: 2em;
				top: 10px;
				position: relative;
			}
			.t-input {
				height: 1.9em;
				font-size: 2.5em;
				border: none;
				position: relative;
				left: 3.5%;
				outline: none;
			}
		}
		.info-money {
			margin-top: 10px;
			font-size: 12px;
			margin-bottom: 20px;
			&-num {
				color: #b2b2b2;
			}
			&-all {
				color: #576b95;
			}
		}
		.tx {
			button {
				color: #b2b2b2;
			}
		}
		.tx-active {
			button {
				color: #fff;
				background: #07c160;
			}
		}
	}
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ebebeb;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition: all 0.2s ease-in 0.2s;
	}
	.active {
		bottom: -400rpx;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #ebebeb;
		border-top: none;
		border-left: none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.delte image {
		width: 60rpx;
		height: 60rpx;
	}
	.isIphone {
		padding-bottom: 68rpx !important;
	}
	.fee {
		em {
			font-size: 0.5rem;
			font-style: normal;
		}
	}
}
</style>
